<template>
  <div v-if="showTinymceEditor" style="width:100%">
    <editor id="tinymceEditor" v-model="contentValue" :init="init"></editor>
  </div>
</template>
<script lang='ts'>
import { defineComponent, onUnmounted, reactive, ref, watch } from "vue"
import tinymce from "tinymce/tinymce"
import Editor from "@tinymce/tinymce-vue"
import "tinymce/themes/silver" //编辑器主题，不引入则报错
import "tinymce/icons/default" //引入编辑器图标icon，不引入则不显示对应图标

// 引入编辑器插件（基本免费插件都在这儿了）
import "tinymce/plugins/advlist" //高级列表
import "tinymce/plugins/anchor" //锚点
import "tinymce/plugins/autolink" //自动链接
import "tinymce/plugins/autoresize" //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import "tinymce/plugins/autosave" //自动存稿
import "tinymce/plugins/charmap" //特殊字符
import "tinymce/plugins/code" //编辑源码
import "tinymce/plugins/codesample" //代码示例
import "tinymce/plugins/directionality" //文字方向
import "tinymce/plugins/emoticons" //表情
import "tinymce/plugins/fullpage" //文档属性
import "tinymce/plugins/fullscreen" //全屏
import "tinymce/plugins/help" //帮助
import "tinymce/plugins/hr" //水平分割线
import "tinymce/plugins/image" //插入编辑图片
import "tinymce/plugins/importcss" //引入css
import "tinymce/plugins/insertdatetime" //插入日期时间
import "tinymce/plugins/link" //超链接
import "tinymce/plugins/lists" //列表插件
import "tinymce/plugins/media" //插入编辑媒体
import "tinymce/plugins/nonbreaking" //插入不间断空格
import "tinymce/plugins/pagebreak" //插入分页符
import "tinymce/plugins/paste" //粘贴插件
import "tinymce/plugins/preview" //预览
import "tinymce/plugins/print" //打印
import "tinymce/plugins/quickbars" //快速工具栏
import "tinymce/plugins/save" //保存
import "tinymce/plugins/searchreplace" //查找替换
// import 'tinymce/plugins/spellchecker'  //拼写检查，暂未加入汉化，不建议使用
import "tinymce/plugins/tabfocus" //切入切出，按tab键切出编辑器，切入页面其他输入框中
import "tinymce/plugins/table" //表格
import "tinymce/plugins/template" //内容模板
import "tinymce/plugins/textcolor" //文字颜色
import "tinymce/plugins/textpattern" //快速排版
import "tinymce/plugins/toc" //目录生成器
import "tinymce/plugins/visualblocks" //显示元素范围
import "tinymce/plugins/visualchars" //显示不可见字符
import "tinymce/plugins/wordcount" //字数统计

import { EditorProps } from "./interface"
import { uploadFile, downloadFileUrl } from "/@/api/org/file-attachment"
console.log(tinymce.majorVersion)
export default defineComponent({
  name: "JxtechTinyEditor",
  components: {
    Editor,
  }
})
</script>
<script lang="ts" setup>
const emit = defineEmits<{
  (e: 'update:content', value: any): void//更新富文本值
}>()

const props = defineProps({
  ...EditorProps,
})
const tinyEditorState = reactive({
  params: {
    /**项目编号 */
    projectid: 'tiny',
    // 组件id
    compId: "tinyEditor",
    /**业务id 对应上传busiId*/
    busiId: "tinyEditor",
    /**业务类型 对应上传 itemType */
    itemType: "picture",
  }
})
const init = reactive({
  language: 'zh-CN',
  language_url: '/tinymce/langs/zh-CN.js',
  skin_url: "/tinymce/skins/ui/oxide", //皮肤：浅色
  content_css: "/tinymce/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
  height: props.height,
  plugins: props.plugins,
  toolbar: props.toolBar,
  menubar: props.menuBar,
  branding: false,
  images_upload_handler: (blobInfo: any, succFun: Function, failFun: Function) => {
    const formData = new FormData()
    formData.append('files', blobInfo.blob())
    formData.append('projectid', tinyEditorState.params.projectid)
    formData.append('compId', tinyEditorState.params.compId)
    formData.append('busiId', tinyEditorState.params.projectid)
    formData.append('itemType', tinyEditorState.params.itemType)
    //上传文件到cos
    uploadFile(formData).then((res: any) => {
      //在succFun回调传入完整的访问地址 自行把握
      const baseUrl = location.origin
      succFun(baseUrl + downloadFileUrl + res.data[0].fileId)
    }).catch((error) => {
      failFun(error)
    })
  },
})

const showTinymceEditor = ref(true)
const contentValue = ref(props.content)
watch(() => props.content, (val) => {
  contentValue.value = val
})
watch(contentValue, (val) => {
  emit("update:content", val)
})

onUnmounted(() => {
  showTinymceEditor.value = false
})


</script>